<template>
	<view class="home">
		<div class="content_itemOne">
			<view class="head">头像</view>
			<view class="right" @click="getHead">
				<image :src="headPictrue" mode=""></image>
				<view class="iconfont icon-jiantou"></view>
			</view>
		</div>

		<div class="content_itemOne" @click="show = true">
			<view class="head">昵称</view>
			<view class="right">
				<view style="font-size: 30rpx;">{{name_demo}}</view>
				<view class="iconfont icon-jiantou"></view>
			</view>
		</div>

		<div class="content_itemOne" @click="show_secret = true">
			<view class="head">修改密码</view>
			<view class="right">
				<view class="iconfont icon-jiantou"></view>
			</view>
		</div>


		<u-popup v-model="show" mode="bottom" border-radius="14" length="80%" :closeable="true">
			<view class="warp">
				<input class="name_input" type="text" v-model="name_revise" maxlength="10" placeholder="请输入修改的名称" />
				<button type="primary" @click="revise">完成修改</button>
			</view>
		</u-popup>

		<u-popup v-model="show_secret" mode="bottom" border-radius="14" length="80%" :closeable="true">
			<view class="warp">
				<view class="flex-row pwd_input">
					<input :type="type" v-model="old_secret" maxlength="10" placeholder="请输入旧密码" />
					<u-icon name="close-circle-fill" v-if="isCloseFlag" @click="isCloseFlag = !isCloseFlag;old_secret = '' " color="#ccc"
					 size="28"></u-icon>
					<u-icon name="eye-fill" v-if="isShowFlag == true" @click="isShowFlag = false;type='text'" color="#ccc" size="28"></u-icon>
					<u-icon name="eye" v-if="isShowFlag == false" @click="isShowFlag = true;type='password' " color="#ccc" size="28"></u-icon>
				</view>
				<view class="flex-row pwd_input">
					<input :type="type" v-model="Input_secret" maxlength="10" placeholder="请输入新密码" />
					<u-icon name="close-circle-fill" v-if="isCloseFlag2" @click="isCloseFlag2 = !isCloseFlag2;Input_secret = ''" color="#ccc"
					 size="28"></u-icon>
					<u-icon name="eye-fill" v-if="isShowFlag == true" @click="isShowFlag = false;type='text'" color="#ccc" size="28"></u-icon>
					<u-icon name="eye" v-if="isShowFlag == false" @click="isShowFlag = true;type='password' " color="#ccc" size="28"></u-icon>
				</view>

				<view class="flex-row pwd_input">
					<input :type="type" v-model="Input_Resecret" maxlength="10" placeholder="请再次输入新密码" />
					<u-icon name="close-circle-fill" v-if="isCloseFlag3" @click="isCloseFlag3 = !isCloseFlag3;Input_Resecret = ''"
					 color="#ccc" size="28"></u-icon>
					<u-icon name="eye-fill" v-if="isShowFlag == true" @click="isShowFlag = false;type='text'" color="#ccc" size="28"></u-icon>
					<u-icon name="eye" v-if="isShowFlag == false" @click="isShowFlag = true;type='password' " color="#ccc" size="28"></u-icon>
				</view>
				<button type="primary" @click="Revise_secret">完成修改</button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'password',
				headPictrue: '../../static/icon/me.png',
				name_demo: '',
				name_revise: '',
				show: false,
				number: '',
				msg_head:'',
				isShowFlag: true,
				isCloseFlag: false,
				isCloseFlag2: false,
				isCloseFlag3: false,
				show_secret: false,
				old_secret: '',
				Input_secret: '',
				Input_Resecret: '',
				border: false,
				passwordIcon: true
			}
		},
		watch: {
			old_secret(newVal, oldVal) {
				if (newVal && this.old_secret > 0) {
					this.isCloseFlag = true;
				} else {
					this.isCloseFlag = false;
				}
			},
			Input_secret(newVal, oldVal) {
				if (newVal && this.Input_secret > 0) {
					this.isCloseFlag2 = true;
				} else {
					this.isCloseFlag2 = false;
				}
			},
			Input_Resecret(newVal, oldVal) {
				if (newVal && this.Input_Resecret > 0) {
					this.isCloseFlag3 = true;
				} else {
					this.isCloseFlag3 = false;
				}
			},
		},
		onShow() {
			this.User = JSON.parse(uni.getStorageSync('userInfo') || '{}') ;
			console.log(this.User);
			if ((JSON.stringify(this.User.message)) == '{}' || this.User === undefined) {
				uni.showToast({
					title: '你还未登录哦',
					icon: 'none'
				})
				this.headPictrue = '../../static/icon/me.png';
				uni.navigateTo({
					url: '/pagesD/login_register/login_register'
				})
				return;
			} else {
				if(this.User.message != undefined ){
					this.headPictrue = this.User.message.image_url;
					this.name_demo = this.User.message.Net_name;
					this.name_revise = this.name_demo;
				}
			}
		},
		methods: {
			getHead() {
				uni.chooseImage({
					count: 1,
					success: res => {
						this.msg_head = res.tempFilePaths[0];
						uni.setStorageSync('Head', this.msg_head);
					}
				})
			},
			async revise() {
				this.show = false;
				this.name_demo = this.name_revise;
				const res = await this.$myRequest({
					url: `revise_User?name=${this.name_revise}&number=${this.number}`
				})
				if (res.data.code == 0) {
					uni.showToast({
						title: '修改成功!',
						success: () => {
							uni.$emit('revise_name', this.name_revise);
						}
					})
					var userInfo = JSON.parse(uni.getStorageSync('userInfo')) || '{}';
					console.log(userInfo, 'thisi si userinfo');
					userInfo.message.Net_name = this.name_demo
					console.log(userInfo);
					uni.setStorageSync('userInfo', JSON.stringify(userInfo));
				}
			},
			async Revise_secret() {
				if (this.Input_secret != this.Input_Resecret || this.Input_Resecret == '' || this.Input_secret == '' || this.old_secret ==
					'') {
					uni.showToast({
						title: '输入有误哦',
						mask: true,
						duration: 800,
						success: () => {
							return;
						}
					})
				} else {
					// 改成全局接口请求的封装
					const res = await uni.request({
						url: `http://3888n9t950.wicp.vip/revise_secret?old_Secret=${this.old_secret}&secret=${this.Input_secret}&number=${this.number}`
					})
					console.log(res);
					if (res[1].data.code == -1) {
						uni.showToast({
							title: '您输入旧密码有误',
							success: () => {
								return;
							}
						})
					} else if (res[1].data.code == 1) {
						uni.showToast({
							title: '新旧密码不能相同哦',
							success: () => {
								return;
							}
						})
					} else {
						uni.showToast({
							title: '修改成功!',
							success: () => {
								this.show_secret = false;
								this.old_secret = '';
								this.Input_secret = '';
								this.Input_Resecret = '';
								return;
							}
						})
					}
				}
			}
		},
		onLoad(options) {
			this.number = options.number;
			// this.name_demo = options.Int_name;
			// this.name_revise = this.name_demo;
		}
	}
</script>

<style lang="scss">
	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.home {
		width: 100%;
		font-size: 28rpx;

		.content_itemOne {
			width: 100%;
			border-bottom: 1px solid #E4E7ED;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			box-sizing: border-box;
			padding: 5px;

			.head {
				padding-left: 20rpx;
				width: 150rpx;
				height: 70px;
				line-height: 70px;
				text-align: center;
				font-weight: bold;
			}

			.right {
				padding-right: 20rpx;
				display: flex;
				align-items: center;

				view {
					height: 70px;
					line-height: 70px;
					font-weight: bold;
					margin-left: 15px;
				}
			}


			image {
				width: 110rpx;
				height: 110rpx;
				border-radius: 100%;
			}
		}

		.icon-jiantou {
			font-size: 46rpx;
		}

		.warp {
			height: 100%;
			height: 40px;
			align-items: center;

			input {
				display: flex;
				justify-content: flex-start;
				height: 40px;
				line-height: 40px;
				font-size: 28rpx;
			}

			.name_input {
				margin: 50px auto 0;
				border-bottom: 2rpx solid #a1a3a8;
				width: 90%;

			}

			.pwd_input {
				display: flex;
				justify-content: space-between;
				width: 90%;
				margin: 0 auto;
				border-bottom: 2rpx solid #a1a3a8;
				padding-top: 80rpx;
				align-items: center;

				input {
					display: block;
					border: none;
					height: 80rpx;
					width: 90%;
				}

				input::after {
					border: none;
				}
			}


			button {
				font-size: 28rpx;
				width: 80%;
				margin-top: 140rpx;
				height: 90rpx;
				line-height: 90rpx;
				background-color: $main-color;
			}

			button::after {
				border: none;
			}

			.u_input {
				// background-color: green;
				width: 90%;
				overflow: hidden;
				border-bottom: 1px solid #ccc;
				margin: 0 20px 20px;
			}
		}

		.secret {

			// box-sizing: border-box;
			// width: 100%;
			// height: 200px;
			// margin-top: 60px;
			// padding: 20px;
		}
	}
</style>
